<script>
import { reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSessionStorage } from "../common.js";
import axios from "axios";

export default {
  setup() {
    const router = useRouter();

    const state = reactive({

      doctor: getSessionStorage("doctor"),

      selectUserForm: {
        userId: "",
        realName: "",
        sex: "",
        smId: "",
        orderDate: "",
        state: "2",
      },

      setmealArr: [],

      ordersPageResponseDto: {
        list: [
          {
            orderId: '',
            userId: '',
            usersRealName: '',
            usersSex: '',
            setmealName: '',
            smId: '',
            hospitalName: '',
            orderDate: '',
            state: '',
          },
        ],
        totalRow: 1,
        maxPageNum: 10,
      },
    });

    listSetmeal();
    function listSetmeal() {
      axios
        .post("api/setmeal/listSetmeal")
        .then((response) => {
          let data = response.data;
          // console.log(data)
          if (data.status == 200) {
            state.setmealArr = data.data;
          } else {
            alert("套餐下拉列表查询失败")
          }
        })
        .catch((error) => {
          console.error(error);
        });
    }

    listOrders(1);


    function listOrders(pageNum) {
      state.selectUserForm.pageNum = pageNum;
      state.selectUserForm.maxPageNum = 10;
      axios
        .post("api/orders/listOrders", state.selectUserForm)
        .then((response) => {
          let data = response.data;
          if (data.status == 200) {
            state.ordersPageResponseDto = data.data;
          } else {
            alert("请至少输入手机号、姓名、性别")
          }

        })
        .catch((error) => {
          console.error(error);
        });
    }

    
    function ciReport(row) {
      let query = {};
      for (let key in row) {
        query[key] = row[key];
      }
      console.log(query)
      router.push({ path:'/reportContent', query: query });
    }

    function doSelect() {
      //console.log(state.selectUserForm);
      listOrders(1);
    }

    function currentChange(pageNum) {
      listOrders(pageNum);
    }
    //点击重置--清空
    function reset() {
      state.selectUserForm = {
        userId: "",
        realName: "",
        sex: "",
        smId: "",
        orderDate: "",
        state: "2",
      };
    }

    return {
      ...toRefs(state),
      ciReport,
      doSelect,
      listOrders,
      currentChange,
      reset,
    };
  },
};

</script>



<template>
  <el-container style="height: 100%">
    <el-header>
      <h1>&nbsp;&nbsp;体检报告管理系统</h1>
      <p>医生：{{ doctor.realName }}</p>
    </el-header>
    <el-container>
      <el-aside width="260px">
        <h4>体检用户查询</h4>
        <el-form ref="user" :model="selectUserForm" label-width="auto">
          <el-form-item label="手机号码">
            <el-input v-model="selectUserForm.userId" placeholder="手机号码"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="selectUserForm.realName" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="selectUserForm.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="套餐类型">
            <el-select v-model="selectUserForm.smId" placeholder="套餐类型">
              <el-option v-for="setmeal in setmealArr" :key="setmeal.smId" :label="setmeal.name"
                :value="setmeal.smId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="体检日期">
            <el-date-picker v-model="selectUserForm.orderDate" type="date" placeholder="体检日期" style="width: 100%"
              format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
          <el-form-item label="是否归档">
            <el-radio-group v-model="selectUserForm.state">
              <el-radio border label="2">未归档</el-radio>
              <el-radio border label="3">已归档</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSelect" style="transform: translateX(65px);">查询</el-button>
            <el-button type="warning" @click="reset" style="transform: translateX(65px);">重置</el-button>
          </el-form-item>
        </el-form>
      </el-aside>
      <el-main>
        <el-table :data="ordersPageResponseDto.list" style="width: 100%">
          <el-table-column prop="orderId" label="预约编号" width="120" />
          <el-table-column prop="userId" label="手机号码" width="140" />
          <el-table-column prop="usersRealName" label="真实姓名" width="120" />
          <el-table-column label="性别" width="60">
            <template #default="scope">
              <span>{{ scope.row.usersSex == 1 ? "男" : "女" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="setmealName" label="套餐类型" />
          <el-table-column prop="hospitalName" label="体检医院" width="220" />
          <el-table-column prop="orderDate" label="体检日期" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button type="text" size="small" @click="ciReport(scope.row)">{{ scope.row.state == 2 ? '编辑体检报告' :
                '查看体检报告' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next, total" :total="ordersPageResponseDto.totalRow"
          :page-size="ordersPageResponseDto.maxPageNum" style="margin-top: 20px" @current-change="currentChange">
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>


<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1c51a3;
}

.el-header h1 {
  font-size: 22px;
  font-weight: 700;
}

.el-header p {
  font-size: 16px;
}

.el-aside {
  background-color: #d3dce6;
  box-sizing: border-box;
  padding: 20px;
}

.el-aside h4 {
  color: #555;
  margin-bottom: 20px;
}

.el-main {
  background-color: #e9eef3;
}
</style>